<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar
      title="账号登录"
      left-arrow
      @click-left="$router.back()"
      class="homeNav"
    />
    <div class="contentBox">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"

          placeholder="请输入账号"

          class="homefield"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          placeholder="请输入密码"

          class="homefield"
        />
        <div style="margin: 16px">
          <van-button
            class="homeNav bottomBtn"
            block
            type="primary"
            native-type="submit"
            size="large"
            >登录</van-button
          >
        </div>
      </van-form>
      <div class="resBtn">还没有账号，去注册～</div>
    </div>
  </div>
</template>

<script>
// import { Toast } from 'vant'
import { login } from '@/api/user'
import { setToken } from '@/utils/stroage'
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async onSubmit (val) {
      if (val.password === '' || val.username === '') {
        this.$toast('用户名和密码不能为空')
      } else {
        const res = await login(val)
        this.$toast.success('登录成功')
        setTimeout(() => {
          this.$router.push('/home')
        }, 1000)
        setToken(res.data.body.token)
      }
    }
  }

}
</script>

<style lang="less" scoped>
/deep/.homeNav {
  background-color: #58b77e;
  // color: #f7fbf9;
  margin-bottom: 21px;
  .van-icon{
       color: aliceblue;
  }
  .van-nav-bar__title {
    color: aliceblue;
  }
}

.contentBox {
  width: 345px;
  height: 252px;
  // background-color: #58b77e;
  margin: 0 15px;
  padding: 2px 0;
  /deep/.homefield {
  padding: 15px 10px;
  width: 345px;
  height:70px ;
  line-height: 40px;
}
.bottomBtn {
  width: 345px;
  margin-left: -15px;
}
.resBtn {
  text-align: center;
  font-size: 14px;
  color: #666666;
}
}

</style>>
